<template>
	<button :style="buttonStyle" @mouseenter="isHovered = true" @click="handleClick" @mouseleave="isHovered = false" class="custom-button">
		<slot></slot>
	</button>
</template>
  
  <script>
export default {
	props: {
		// 按钮颜色
		color: {
			type: String,
			default: '#409eff', // 默认按钮颜色
		},
		// hover 颜色
		hoverColor: {
			type: String,
			default: '#18181870', // 默认 hover 颜色
		},
        onClick: {
            type: Function,
            default: () => {}, // 默认空函数
        },
		width: {
            type: String,
            default: '', // 默认空函数
        },
	},
	data() {
		return {
			isHovered: false, // 是否 hover
		};
	},
    methods: {
    // 点击事件处理
    handleClick() {
      this.onClick(); // 直接调用传入的点击事件处理函数
    },
  },
	computed: {
		// 动态计算按钮样式
		buttonStyle() {
			return {
				color: this.isHovered ? this.hoverColor : this.color, // 文字颜色
                // margin: '0  5px 0 5px',
				// fontSize: '12px',
				border: 'none',
				height: '36px',
				width: this.width,
				// borderRadius: '4px',
				cursor: 'pointer',
				transition: 'background-color 0.3s ease',
			};
		},
	},
};
</script>

<style lang="scss" scoped>
button {
	background-color:  transparent !important;
}
button + button {
    margin-left: 15px;
}
</style>
  